<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include::head('文章内容')" />
</head>
<body>
<div id="app">
    <!-- 顶部 -->
    <header th:include="include::header" id="fix_nav"></header>

    <!-- 移动端菜单面板 -->
    <div th:include="include::mobile-nav" class="panel-right"></div>

    <!-- 主体部分  -->
    <article class="page-main clearfix">
        <div th:include="include::search-panel" class="search-panel" id="search">
            <form action="" method="get">
                <div class="search-box">
                    <label class="close-btn" for="search">X</label>
                    <input id="search-input" type="text" name="keywords" placeholder="搜索从这里开始..."/>
                </div>
            </form>
        </div>
        <div class="post-header">
            <h1 th:text="${post.articleTitle}"></h1>
        </div>
        <div class="post-data">
            <div class="article-meta">
                <span>
                    <i class="iconfont icon-folder"></i>
                    编程开发
                </span>
                <span>
                    <i class="iconfont icon-profile"></i>
                    admin
                </span>
                <span>
                    <i class="iconfont icon-eye"></i>
                    132
                </span>
                <span>
                    <i class="iconfont icon-date"></i>
                    2021-11-17
                </span>
            </div>
        </div>
        <div class="post-content">
            <p class="post-tags">
                标签:
                <a href=""># 学习笔记</a>
                <a href=""># WEB前端</a>
            </p>
            <div class="content-body">
                <div class="article-content" th:html="${post.articleContent}">

                </div>
            </div>
            <div class="neigborhood">
                <div class="prevlog">
                    上一篇<br>
                    <a href="">【前端工程化】Rollup构建工具</a>
                </div>
                <div class="nextlog">
                    下一篇<br>
                    <a href="">2020-05-15的 一些思考</a>
                </div>
            </div>
            <p class="post-info">
                版权声明：《 <a href="">CJS、AMD、ESM、UMD、IIFE 模块化开发</a> 》为
                <a href="" > 北浪 </a>原创文章，转载请注明出处！<br>
                最后编辑:2021-5-20 18:05:48
            </p>
        </div>
    </article>

    <!-- 页脚 -->
    <div th:include="include::footer" class="footer" id="footer"></div>

    <!-- 返回顶部 -->
    <div th:include="include::scroll-to-top" id="scroll-to-top"></div>
</div>
</body>
</html>